<!--布局块数据编辑表单-->
<template>
  <div class="absolute-layout-item-form">
    <Tabs size="small">
      <TabPane label="基本配置" style="padding-top: 10px;">
        <Form :label-width="105">
          <FormItem label="布局块ID">
            <i-input size="small" v-model="id" readonly>
              <Button title="复制" slot="append" v-clipboard="idClipOptions"><Icon type="md-copy" /></Button>
            </i-input>
          </FormItem>
          <FormItem label="自定义Class">
            <i-input size="small" v-model="className">
              <Button title="复制" slot="append" v-clipboard="classNameClipOptions"><Icon type="md-copy" /></Button>
            </i-input>
          </FormItem>
          <!--<FormItem label="组件代码名称">
            <Input size="small" v-model="layoutItemName" disabled/>
          </FormItem>-->
          <FormItem label="布局块名称">
            <Input size="small" v-model="layoutItemAliasName" placeholder="定义此布局块的备注名称"/>
          </FormItem>

          <FormItem label="允许拖拽">
            <i-switch v-model="draggableEnabled" size="small"></i-switch>
          </FormItem>
          <!--<FormItem label="允许调整大小">
            <i-switch v-model="resizableEnabled">
              <span slot="open"></span>
              <span slot="close"></span>
            </i-switch>
          </FormItem>-->

          <FormItem label="宽度">
            <Tooltip content="画布拖拽单位像素大于1，宽度将无法手动编辑" max-width="200" placement="left" :disabled="dragPixel > 1 ? false:true">
              <InputNumber size="small" :max="50000" :min="1" :step="dragPixel" v-model="width" :active-change="false"
                           :editable="dragPixel > 1 ? false:true"
                           @on-change="whltChangeHandler"></InputNumber> px
            </Tooltip>
          </FormItem>
          <FormItem label="高度">
            <Tooltip content="画布拖拽单位像素大于1，高度将无法手动编辑" max-width="200" placement="left" :disabled="dragPixel > 1 ? false:true">
              <InputNumber size="small" :max="50000" :min="1" :step="dragPixel" v-model="height" :active-change="false"
                           :editable="dragPixel > 1 ? false:true"
                           @on-change="whltChangeHandler"></InputNumber> px
            </Tooltip>
          </FormItem>
          <FormItem label="左偏移">
            <Tooltip content="画布拖拽单位像素大于1，左偏移将无法手动编辑" max-width="200" placement="left" :disabled="dragPixel > 1 ? false:true">
              <InputNumber size="small" :max="50000" :min="-50000" :step="dragPixel" v-model="left" :active-change="false"
                           :editable="dragPixel > 1 ? false:true"
                           @on-change="whltChangeHandler"></InputNumber> px
            </Tooltip>
          </FormItem>
          <FormItem label="上偏移">
            <Tooltip content="画布拖拽单位像素大于1，上偏移将无法手动编辑" max-width="200" placement="left" :disabled="dragPixel > 1 ? false:true">
              <InputNumber size="small" :max="50000" :min="-50000" :step="dragPixel" v-model="top" :active-change="false"
                           :editable="dragPixel > 1 ? false:true"
                           @on-change="whltChangeHandler"></InputNumber> px
            </Tooltip>
          </FormItem>

          <FormItemPanel title="快捷定位">
            <ButtonGroup size="small" :style="{position: 'relative', left: '50%', transform: 'translateX(-50%)'}">
              <Button @click="shortcutPositionChange('H')">
                <Tooltip content="水平居中" placement="top">
                  <span style="padding: 0 10px;"><Icon custom="iconfont icon-h-center" style="margin-top: -2px;"/></span>
                </Tooltip>
              </Button>
              <Button @click="shortcutPositionChange('V')">
                <Tooltip content="垂直居中" placement="top">
                  <span style="padding: 0 10px;"><Icon custom="iconfont icon-v-center" style="margin-top: -2px;"/></span>
                </Tooltip>
              </Button>
              <Button @click="shortcutPositionChange('H-V')">
                <Tooltip content="水平/垂直居中" placement="top">
                  <span style="padding: 0 10px;"><Icon custom="iconfont icon-h-v-center" style="margin-top: -2px;"/></span>
                </Tooltip>
              </Button>
            </ButtonGroup>
          </FormItemPanel>

          <FormItemPanel title="快捷尺寸">
            <ButtonGroup size="small" :style="{position: 'relative', left: '50%', transform: 'translateX(-50%)'}">
              <Button @click="shortcutSizeChange('W-FULL')">
                <Tooltip content="宽度铺满" placement="top">
                  <span style="padding: 0 10px;"><Icon custom="iconfont icon-w-full" size="17" style="margin-top: -2px;"/></span>
                </Tooltip>
              </Button>
              <Button @click="shortcutSizeChange('H-FULL')">
                <Tooltip content="高度铺满" placement="top">
                  <span style="padding: 0 10px;"><Icon custom="iconfont icon-h-full" size="17" style="margin-top: -2px;"/></span>
                </Tooltip>
              </Button>
              <Button @click="shortcutSizeChange('FullScreen')">
                <Tooltip content="全屏铺满" placement="top">
                  <span style="padding: 0 10px;"><Icon custom="iconfont icon-w-h-full" size="17" style="margin-top: -2px;"/></span>
                </Tooltip>
              </Button>
            </ButtonGroup>
          </FormItemPanel>


          <FormItem label="层级">
            <Tooltip content="层级越大，将显示于越上层，最大值为：8887，最小值为-9998" max-width="200" placement="left">
              <InputNumber size="small" :max="8887" :min="-9998" v-model="zIndex"></InputNumber>
            </Tooltip>
          </FormItem>

          <FormItem label="透明度">
            <InputNumber size="small" :max="1" :min="0" :step="0.1" v-model="opacity"></InputNumber>
          </FormItem>

          <FormItem label="是否显示">
            <i-switch v-model="display" :true-value="'block'" :false-value="'none'" size="small"></i-switch>
          </FormItem>
          <FormItem label="鼠标事件穿透" v-show="mouseEventPierce != undefined">
            <Tooltip :max-width="250"
                     content="开启鼠标事件穿透后，鼠标的悬停、点击等操作将对该图层无效，会直接穿透到该图层下面的图层"
                     placement="left">
              <i-switch v-model="mouseEventPierce" size="small"></i-switch>
            </Tooltip>
          </FormItem>
        </Form>
      </TabPane>
      <TabPane label="扩展样式" style="padding-top: 5px;">
        <Form :label-width="105">
          <FormItem label="背景颜色">
            <PnColorPicker size="small" v-model="backgroundColor" alpha recommend/>
          </FormItem>
          <FormItem label="内边距">
            <InputNumber size="small" :max="10000" :min="0" :step="1" v-model="padding"></InputNumber> px
          </FormItem>
          <!--<FormItem label="鼠标滑入背景色">
            <PnColorPicker size="small" v-model="backgroundColorHover" alpha recommend/>
          </FormItem>
          <FormItemPanel title="自定义样式">
            <CodeEditor v-model="customStyleCode" mode="css"></CodeEditor>
          </FormItemPanel>-->

          <FormItemPanel title="边框">
            <FormItem label="边框宽度">
              <InputNumber size="small" :max="10000" :min="0" :step="1" v-model="borderWidth"></InputNumber> px
            </FormItem>
            <FormItem label="边框类型">
              <Select size="small" v-model="borderStyle">
                <Option v-for="item in $PnDict.borderStyles" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="边框颜色">
              <PnColorPicker size="small" v-model="borderColor" alpha recommend/>
            </FormItem>
            <FormItem label="圆角-上左">
              <InputNumber size="small" :max="10000" :min="0" :step="1" v-model="borderTopLeftRadius"></InputNumber> px
            </FormItem>
            <FormItem label="圆角-上右">
              <InputNumber size="small" :max="10000" :min="0" :step="1" v-model="borderTopRightRadius"></InputNumber> px
            </FormItem>
            <FormItem label="圆角-下右">
              <InputNumber size="small" :max="10000" :min="0" :step="1" v-model="borderBottomLeftRadius"></InputNumber> px
            </FormItem>
            <FormItem label="圆角-下左">
              <InputNumber size="small" :max="10000" :min="0" :step="1" v-model="borderBottomRightRadius"></InputNumber> px
            </FormItem>
          </FormItemPanel>

          <FormItemPanel title="阴影">
            <FormItem label="内阴影">
              <i-switch v-model="boxShadowInset">
                <span slot="open"></span>
                <span slot="close"></span>
              </i-switch>
            </FormItem>
            <FormItem label="水平位移">
              <InputNumber size="small" :max="100" :min="-100" :step="1" v-model="boxShadowLeft"></InputNumber> px
            </FormItem>
            <FormItem label="垂直位移">
              <InputNumber size="small" :max="100" :min="-100" :step="1" v-model="boxShadowTop"></InputNumber> px
            </FormItem>
            <FormItem label="模糊半径">
              <InputNumber size="small" :max="100" :min="0" :step="1" v-model="boxShadowRadius"></InputNumber> px
            </FormItem>
            <FormItem label="阴影颜色">
              <PnColorPicker size="small" v-model="boxShadowColor" alpha recommend/>
            </FormItem>
          </FormItemPanel>
        </Form>
      </TabPane>
      <TabPane label="旋转过渡" style="padding-top: 5px;">
        <Form :label-width="105">
          <FormItemPanel title="2D旋转">
            <FormItem label="旋转角度">
              <Slider size="small" v-model="rotationAngle" :max="360" :min="0"></Slider>
            </FormItem>
            <FormItem label="水平翻转">
              <i-switch v-model="flipHorizontal" size="small"></i-switch>
            </FormItem>
            <FormItem label="垂直翻转">
              <i-switch v-model="flipVertical" size="small"></i-switch>
            </FormItem>
          </FormItemPanel>
          <FormItemPanel title="3D旋转">
            <FormItem label="启用">
              <i-switch v-model="use3dRotate" size="small"></i-switch>
            </FormItem>
            <FormItem label="旋转轴">
              <Select :transfer="true" size="small" v-model="axisOfRotation">
                <Option v-for="item in axisOfRotations" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="旋转角度">
              <Slider size="small" v-model="rotationAngleFor3d" :max="180" :min="-180" :active-change="false" :show-input="true" input-size="small"></Slider>
            </FormItem>
            <FormItem label="透视距离">
              <InputNumber size="small" :max="2000" :min="100" v-model="perspectiveFor3d" :active-change="false"></InputNumber>
            </FormItem>
          </FormItemPanel>
          <FormItemPanel title="过渡动画">
            <FormItem label="启用">
              <i-switch v-model="animationVisible" size="small"></i-switch>
            </FormItem>
            <FormItem label="延时时间">
              <Select transfer size="small" v-model="animationDelay" clearable>
                <Option v-for="item in $PnDict.animationDelayClass" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="进场动画">
              <Select transfer size="small" v-model="inAnimation" clearable>
                <Option v-for="item in $PnDict.inAnimations" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="出场动画">
              <Select transfer size="small" v-model="outAnimation" clearable>
                <Option v-for="item in $PnDict.outAnimations" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </FormItemPanel>
        </Form>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'AbsoluteLayoutItemForm',
    data() {
      return {
        belongGroupItemId: null,

        recordLocation: {
          flag: false,
          left: 0,
          top: 0
        },

        axisOfRotations: [
          {
            label: 'x轴',
            value: 'x'
          },
          {
            label: 'y轴',
            value: 'y'
          },
          {
            label: 'xy轴',
            value: 'xy'
          }
        ],

        // customStyleCodeData: '',
        // mouseenterScriptData: '',
        // mouseleaveScriptData: '',
      }
    },
    mounted() {
      /*this.customStyleCodeData = this.customStyleCode;
      this.mouseenterScriptData = this.mouseenterScript;
      this.mouseleaveScriptData = this.mouseleaveScript;*/
    },
    methods: {

      shortcutPositionChange (val) {
        let pageMetadata = this.$store.getters['designer/getPageMetadata'];
        switch (val) {
          case 'H':
            this.$store.commit('designer/setLayoutItemLeftAndTop', {
              id: this.id,
              left: Math.floor(pageMetadata.layout.layoutConfigData.width/2) - Math.floor(this.width/2),
              top: this.top
            })
            break
          case 'V':
            this.$store.commit('designer/setLayoutItemLeftAndTop', {
              id: this.id,
              left: this.left,
              top: Math.floor(pageMetadata.layout.layoutConfigData.height/2) - Math.floor(this.height/2)
            })
            break
          case 'H-V':
            this.$store.commit('designer/setLayoutItemLeftAndTop', {
              id: this.id,
              left: Math.floor(pageMetadata.layout.layoutConfigData.width/2) - Math.floor(this.width/2),
              top: Math.floor(pageMetadata.layout.layoutConfigData.height/2) - Math.floor(this.height/2)
            })
            break
        }
      },

      shortcutSizeChange (val) {
        let pageMetadata = this.$store.getters['designer/getPageMetadata'];
        switch (val) {
          case 'W-FULL':
            this.$store.commit('designer/setLayoutItemWhlt', {
              id: this.id,
              width: pageMetadata.layout.layoutConfigData.width,
              height: this.height,
              left: 0,
              top: this.top
            })
            break
          case 'H-FULL':
            this.$store.commit('designer/setLayoutItemWhlt', {
              id: this.id,
              width: this.width,
              height: pageMetadata.layout.layoutConfigData.height,
              left: this.left,
              top: 0
            })
            break
          case 'FullScreen':
            this.$store.commit('designer/setLayoutItemWhlt', {
              id: this.id,
              width: pageMetadata.layout.layoutConfigData.width,
              height: pageMetadata.layout.layoutConfigData.height,
              left: 0,
              top: 0
            })
            break
        }
      },

      /**
       * 校验是否已被成组
       */
      verifyIsOrNoBelongGroup () {
        let layoutGroup = this.$store.getters['designer/getLayoutGroup']
        for (let i=0; i<layoutGroup.length; i++) {
          if (layoutGroup[i].layoutItemIds.indexOf(this.id) > -1) {
            this.belongGroupItemId = layoutGroup[i].id
            break
          }else {
            this.belongGroupItemId = null
          }
        }
      },

      /**
       * 如果当前组件已被成组，当宽度、高度、左偏移、上偏移等输入框失活时，调用此函数，刷新组的尺寸
       */
      notifyUpdateGroupItemStoreSize () {
        if (this.belongGroupItemId) {
          this.$DesignerCommonUtil.updateGroupItemStoreSize(this.belongGroupItemId)
        }
      },

      whltChangeHandler () {
        this.notifyUpdateGroupItemStoreSize();
      },

      updateCustomStyleCode () {
        this.updateField('layoutItemConfigData.customStyleCode', this.customStyleCodeData)
      },

      updateMouseenterScript () {
        this.updateField('layoutItemConfigData.mouseenterScript', this.mouseenterScriptData)
      },
      updateMouseleaveScript () {
        this.updateField('layoutItemConfigData.mouseleaveScript', this.mouseleaveScriptData)
      }

    },
    computed: {
      ...mapFields({
        id: 'id',
        layoutItemName: 'name',
        layoutItemAliasName: 'aliasName',
        layoutItemConfigData: 'layoutItemConfigData',

        className: 'layoutItemConfigData.className',

        draggableEnabled: 'layoutItemConfigData.draggableEnabled',
        resizableEnabled: 'layoutItemConfigData.resizableEnabled',
        width: 'layoutItemConfigData.width',
        height: 'layoutItemConfigData.height',
        left: 'layoutItemConfigData.left',
        top: 'layoutItemConfigData.top',

        backgroundColor: 'layoutItemConfigData.backgroundColor',
        padding: 'layoutItemConfigData.padding',

        backgroundColorHover: 'layoutItemConfigData.backgroundColorHover',
        mouseenterScript: 'layoutItemConfigData.mouseenterScript',
        mouseleaveScript: 'layoutItemConfigData.mouseleaveScript',

        borderWidth: 'layoutItemConfigData.borderWidth',
        borderStyle: 'layoutItemConfigData.borderStyle',
        borderColor: 'layoutItemConfigData.borderColor',

        borderTopLeftRadius: 'layoutItemConfigData.borderTopLeftRadius',
        borderTopRightRadius: 'layoutItemConfigData.borderTopRightRadius',
        borderBottomLeftRadius: 'layoutItemConfigData.borderBottomLeftRadius',
        borderBottomRightRadius: 'layoutItemConfigData.borderBottomRightRadius',

        boxShadowInset: 'layoutItemConfigData.boxShadowInset',
        boxShadowLeft: 'layoutItemConfigData.boxShadowLeft',
        boxShadowTop: 'layoutItemConfigData.boxShadowTop',
        boxShadowRadius: 'layoutItemConfigData.boxShadowRadius',
        boxShadowColor: 'layoutItemConfigData.boxShadowColor',

        zIndex: 'layoutItemConfigData.zIndex',

        mouseEventPierce: 'layoutItemConfigData.mouseEventPierce',

        animationVisible: 'layoutItemConfigData.animationVisible',
        animationDelay: 'layoutItemConfigData.animationDelay',
        inAnimation: 'layoutItemConfigData.inAnimation',
        outAnimation: 'layoutItemConfigData.outAnimation',

        rotationAngle: 'layoutItemConfigData.rotationAngle',
        flipHorizontal: 'layoutItemConfigData.flipHorizontal',
        flipVertical: 'layoutItemConfigData.flipVertical',

        use3dRotate: 'layoutItemConfigData.use3dRotate',
        axisOfRotation: 'layoutItemConfigData.axisOfRotation',
        rotationAngleFor3d: 'layoutItemConfigData.rotationAngleFor3d',
        perspectiveFor3d: 'layoutItemConfigData.perspectiveFor3d',

        opacity: 'layoutItemConfigData.opacity',
        display: 'layoutItemConfigData.display',

        customStyleCode: 'layoutItemConfigData.customStyleCode',

        component: 'component',
        componentId: 'component.id',
        componentName: 'component.name',
        componentConfigData: 'component.compConfigData'
      }),
      idClipOptions () {
        return {
          value: this.id,
          success: () => {
            this.$Message.success('复制成功')
          },
          error: () => {
            this.$Message.error('复制失败')
          }
        }
      },
      classNameClipOptions () {
        return {
          value: this.className,
          success: () => {
            this.$Message.success('复制成功')
          },
          error: () => {
            this.$Message.error('复制失败')
          }
        }
      },
      dragPixel () {
        return this.$store.state.designer.pageMetadata.layout.layoutConfigData.dragPixel
      }
    },
    watch: {
      'id': {
        handler: function (val, oldVal) {
          if (val != oldVal) {
            this.verifyIsOrNoBelongGroup()
          }
        },
        immediate: true
      }
    }
  }
</script>

<style scoped>
  .absolute-layout-item-form {
    /*margin-left: -16px;*/
    /*margin-right: -16px;*/
    /*margin-bottom: -16px;*/
    margin-top: -10px;
    margin-bottom: -10px;
  }
  .ivu-form-item {
    margin-bottom: 0px;
  }
</style>
